<template>
  <div>
  <div class="flex" style="width: 80vm;overflow: auto">
    <div style="width: 40%">
      <div class="title">
        缺少零件
      </div>
      <el-table
      :data="form.lackingMaterialList"
      height="200"
      border
      style="width: 100%;height: 200px;">
      <el-table-column
        prop="goodsCode"
        label="商品编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称"
        width="180">
      </el-table-column>
        <el-table-column
          prop="model"
          label="规格">
        </el-table-column>
        <el-table-column
          prop="goodsCount"
          label="缺少数量">
        </el-table-column>
    </el-table>
    </div>
    <div
      class="fl1"
    >
      <div class="title">
        缺少原料
      </div>
      <el-table
        :data="form.lackingComponentList"
        border
        style="width: 100%;height: 200px;">
      <el-table-column
        prop="goodsCode"
        label="商品编码"
        width="180">
      </el-table-column>
      <el-table-column
        prop="goodsName"
        label="商品名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="model"
        label="规格">
      </el-table-column>
      <el-table-column
        prop="goodsCount"
        label="数量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.goodsCount" :min="0" :max="99999999" :step="1"></el-input>
        </template>
      </el-table-column>
        <el-table-column
          prop="taxBoxPrice"
          label="箱价">
          <template slot-scope="scope">
            <el-input v-model="scope.row.taxBoxPrice" :min="0" :max="99999999" :step="1"></el-input>
          </template>
        </el-table-column>
      <el-table-column
        prop="address"
        label="单价">
        <template slot-scope="scope">
          <el-input v-model="scope.row.taxPrice" :min="0" :max="99999999" :step="1"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="金额">
        <template slot-scope="scope">
          <el-input v-model="scope.row.taxAmount" :min="0" :max="99999999" :step="1"></el-input>
        </template>
      </el-table-column>
      </el-table>
    </div>
  </div>
    <div class="flex" style="justify-content: right;margin: 20px">
      <el-button type="success" @click="generateBuy">生成采购单</el-button>
    </div>
  </div>
</template>

<script>
import proxyGoods from '@/models/proxyGoods'
import { checkMaterial, checkMaterialAddBuyOrder } from '@/api/erp/salesOrder'

export default {
  name: 'GoodsDemand',
  props:{
    salesOrderIds:{
      type:[Array,String,Number],
      default:()=>[]
    },
    warehouseId:{
      type:Number,
      default:0
    }
  },
  data() {
    return {
      form:{
        lackingMaterialList:[],
        lackingComponentList:[]
      },
      tableData: []
    }
  },
  created() {
    if(this.warehouseId){
      const salesOrderIds = Array.isArray(this.salesOrderIds)?this.salesOrderIds:[this.salesOrderIds]
      checkMaterial({salesOrderIds,warehouseId:this.warehouseId}).then(res=>{
        //后端零件与原料弄反了  这边调换一下
        //const [lackingMaterialList,lackingComponentList,] = [res.data.lackingComponentList,res.data.lackingMaterialList]
        this.form = res.data
        this.form.lackingComponentList = data.res.lackingComponentList.map(item=>proxyGoods(item))
      })
    }
  },
  methods:{
    async generateBuy(){
      const res =await checkMaterialAddBuyOrder(this.form)
      console.log(res)
      if(res.status === 200){
        this.$message.success('生成成功')
        this.$emit('close')
      }else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>
<style scoped>
.title{
  font-size: 24px;
}
</style>
